<template>
  <div>
    <div class="tips">限{{ limit }}张，图片大小不超过{{ max }}M</div>
    <div class="imgList">
      <div v-for="item in imageList" :key="item" class="imgBox">
        <div class="mediaOut">
          <el-image alt="" :preview-src-list="imageList" :src="item" />
        </div>
        <div class="icons">
          <vab-icon icon="delete-bin-line" @click="deleteImage(item)" />
          <vab-icon icon="download-cloud-2-line" @click="download(item)" />
        </div>
      </div>
      <el-upload
        accept="image/*"
        :action="action"
        :before-upload="beforeUpload"
        :class="imageList.length >= limit ? 'uploadBox hide' : 'uploadBox'"
        :data="otherData"
        :limit="limit"
        :multiple="false"
        :on-success="uploadImage"
        :show-file-list="false"
      >
        <i class="el-icon-plus"></i>
      </el-upload>
    </div>
  </div>
</template>
<script>
  import { getToken } from '@/utils/token'
  import { baseURL } from '@/config'
  import { downloadFile } from '@/utils/index'
  export default {
    name: 'ImagesUpload',
    props: {
      image: {
        type: String,
        default: '',
      },
      max: {
        type: Number,
        default: 10,
      },
      limit: {
        type: Number,
        default: 1,
      },
    },
    data() {
      return {
        otherData: {},
        action: baseURL + '/?s=App.Common_File.Upload',
        imageList: [],
      }
    },
    created() {
      this.otherData['access_token'] = getToken()
      this.imageList = this.image == '' ? [] : this.image.split(',')
    },
    methods: {
      uploadImage(res) {
        if (res.ret == 200) {
          this.imageList.push(res.data.url)
        } else {
          this.$baseMessage(
            res.msg ? res.msg : '上传失败',
            'error',
            'vab-hey-message-error'
          )
        }
        this.sendImages()
      },
      deleteImage(item) {
        this.imageList.splice(this.imageList.indexOf(item), 1)
        this.sendImages()
      },
      download(item) {
        downloadFile(item)
      },
      beforeUpload(file) {
        let imgSize = Number(file.size / 1024 / 1024)
        if (imgSize > this.max) {
          this.$msgbox({
            title: '',
            message: '上传图片大小不能超过' + this.max + 'MB，请重新上传。',
            type: 'warning',
          })
          return false
        }
      },
      sendImages() {
        this.$emit('onChange', this.imageList)
      },
    },
  }
</script>
<style lang="scss" scoped>
  .tips {
    line-height: 32px;
    color: #999;
  }

  .imgList {
    display: flex;
    flex-wrap: wrap;
    .imgBox {
      width: 90px;
      height: 90px;
      margin: 0 5px;
      margin-bottom: 10px;
      border-radius: 5px;
      overflow: hidden;
      position: relative;
      .mediaOut {
        width: 90px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        position: relative;
        i {
          position: absolute;
          color: #3f3f3f;
          font-size: 30px;
          top: calc(50% - 26px);
          left: calc(50% - 15px);
        }
        ::v-deep .el-image__inner {
          width: 90px;
          height: 90px;
          object-fit: cover;
        }
      }
      .icons {
        background: rgba(255, 255, 255, 0.9);
        height: 25px;
        width: 100%;
        position: absolute;
        bottom: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        i {
          margin: 0 8px;
          color: #6898fc;
          cursor: pointer;
        }
      }
    }
    .uploadBox {
      width: 90px;
      height: 90px;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      border: 1px dashed #999;
      border-radius: 4px;
      &.hide {
        display: none;
      }
      &:hover {
        border-color: #6898fc;
      }
      i {
        width: 90px;
        height: 90px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
</style>
